import React, { Component } from 'react'
import axios from "axios"
import Clacss from "../scss/Classify.module.scss"

export default class Pay extends Component {
    state = {
        mesage: [],
        num: 0
    }
    componentDidMount() {
        axios.get("https://www.linweiqin.cn/api/public/v1/categories").then(res => {
            this.setState({
                mesage: res.data.message
            })
        })

    }
    backTohome = () => {
        window.history.back()
    }
    goClassfor = (ind) => {

        this.setState({
            num: ind - 0
        })
    }
    /* 跳转列表页 */
    linkProduct = (pid) => {
        // 1. 进行路由跳转
        this.props.history.push("goodlist");
    }
    /* 处理数据中没有children的情况 */
    handlechildren = (val) => {
        if (val.children) {
            /* 具体产品 */
            return (
                val.children.map((value2, idnex) => {
                    return (
                        <li key={value2.cat_name} onClick={this.linkProduct}>
                            <img src={value2.cat_icon} alt="" key={value2.cat_name + "img"} />
                            <p key={value2.cat_name + "p"}>{value2.cat_name}</p>
                        </li>
                    )
                })
            )
        } else {
            return (
                <img src={val.cat_icon} alt="" onClick={this.linkProduct} />
            )
        }
    }
    render() {
        console.log("pay组件进入加载");
        let nownum = this.state.num
        console.log(nownum);
        return (
            <div className={Clacss.claduct}>
                {/* 主页头部 */}
                <div className={Clacss.claHeader}>
                    <div className={Clacss.claHeaderLef} onClick={this.backTohome}><span className="iconfont claback">&#xe66e;</span></div>
                    <div className={Clacss.claHeaderCen}>分类</div>
                    <div className={Clacss.claHeaderRig}><span></span></div>
                </div>
                {/* 主体部分 */}
                <div className={Clacss.claBody}>
                    {/* 左侧产品列表 */}
                    <div className={Clacss.claList}>
                        {
                            this.state.mesage.map((value, index) => {
                                return (
                                    <li key={value.cat_id} onClick={this.goClassfor.bind(this, index)} className={index === nownum ? Clacss.nowLi : ""}>{value.cat_name}</li>
                                )
                            })
                        }

                    </div>
                    {/* 右侧产品详情 */}

                    {this.state.mesage.length > 1 ? (
                            <div className={Clacss.claPros}>
                        {
                            this.state.mesage[nownum].children.map((value, index) => {
                                return (
                                    <div key={value.cat_id} className={Clacss.claonecla}>
                                        <h3 key={value.cat_id + "h3"}>{"/ " + value.cat_name + " /"}</h3>
                                        <div className={Clacss.claGoods} key={value.cat_id + "div"}>
                                            {
                                                /* 具体产品 */
                                                this.handlechildren(value)
                                            }
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>) : null}
                </div>

            </div>
        )
    }

}
